<template>
    <div class="product">
        <h1 class="name">
            {{cate_name}}
        </h1>
        <div class="fragment-wrap">
            让宜家的电竞家具来帮你实现天生职业玩家的梦想。体验电竞桌、电竞椅和游戏配件等符合人体工学的电竞房家具，它们的设计既有助于你的发挥，又能融入你的家。
        </div>
        <div class="filterNav">
            <span class="nav-sort">尺寸</span>
            <span class="nav-sort">类型</span>
            <span class="nav-sort">材质</span>
        </div>
        <div class="product-list">
            <div class="row">
                <div class="col" v-for="item in goodList" :key="item.id" @click="$navTo('/home/BuyProduct?id='+item.id)">
                    <div class="product-img">
                        <img :src="item.cover" class="img" alt="">
                    </div>
                    <h3 class="product-name">{{item.goods_name}}</h3>
                    <p class="size">{{item.size}}</p>
                    <p class="material">{{item.material}}</p>
                </div>
            </div>
            <div id="page">
                <el-pagination
                    layout="prev, pager, next"
                    :current-page="page"
                    @current-change="nextPage"
                    :page-size="limit"
                    :total="total">
                </el-pagination>
            </div>
            
        </div>
    </div>
</template>
<script>
import request from '../../utils/request'
export default{
    data(){
        return{
            keyword:'',
            cate_name:'',
            page:1,
            limit:20,
            last_page:1,
            total:null,
            goodList:[]
        }
    },
    created(){
        this.keyword = this.$route.query.keyword
        this.getGoodList()
    },
    watch: {
        $route(){
            this.keyword = this.$route.query.keyword
        },
        keyword() {
            this.getGoodList()
        },
    },
    methods:{
        nextPage(i){
            this.page = i
            this.getGoodList()
        },
        getGoodList(){
            var that = this
            request.post('/goods/getGoodsList',{keyword:this.keyword,page:this.page,number:this.limit}).then(res=>{
                that.goodList = res.data.data
                that.total = res.data.total
                this.cate_name = res.data.cate_name
            })
        },
        
    }
}
</script>
<style lang="scss" scoped>
.product{
    padding-top: 40px;
    #page {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .name{
        margin-bottom: 30px;
        height: 48px;
        font-weight: 700;
        font-size: 28px;
        line-height: 38px;
        letter-spacing: 5px;
        color: #111;
    }
    .fragment-wrap{
        font-size: 14px;
        color: #999;
        margin-bottom: 30px;
    }
    .filterNav{
        font-size: 0;
        padding-bottom: 30px;
        border-bottom: 1px solid #eee;
        .nav-sort{
            display: inline-block;
            vertical-align: top;
            margin-right: 20px;
            height: 24px;
            box-sizing: content-box;
            line-height: 24px;
            font-size: 12px;
            font-weight: 700;
            background: #f5f5f5;
            border-radius: 16px;
            padding: 4px 24px;
            cursor: pointer;
            &:hover{
                background: #bbb;
            }
        }
    }
    .product-list{
        margin-top: 32px;
        .row{
            display: flex;
            flex-wrap: wrap;
            
            .col{
                width: calc(20% - 12px);
                margin-right: 15px;
                text-align: center;
                margin-bottom: 20px;
                padding-bottom: 10px;
                cursor: pointer;
                &:hover{
                    background: #eee;
                }
                &:last-child{margin: 0;}
                .product-img{
                    margin-bottom: 10px;
                    .img{
                        width: 100%;
                        height: auto;
                    }
                }
                .product-name{
                    font-size: 18px;
                    color: #333;
                    font-weight: 600;
                    margin: 0;
                    margin-bottom: 5px;
                }
                .size,.material{
                    font-size: 14px;
                    margin-top: 0;
                    color: #333;
                    margin-bottom: 5px;
                }
            }
        }
    }
}
</style>